<template>
  <div id="usePage">
    <div class="topRow">
      <div class="userAvatar">
        <van-image v-if="currentUser" style="padding: 2rem" round width="5rem" height="5rem" :src="currentUser.avatarUrl" />
      </div>
      <div class="userInfo">
        <span class="userName" style="padding: 3px">{{ currentUser?.userName }}</span>
        <van-tag v-if="currentUser?.userRole" type="primary" size="large">{{ currentUser?.userRole }}</van-tag>
      </div>
      <van-button style="margin-top: 40px; margin-right: 2rem" round type="primary">编辑资料</van-button>
    </div>
    <van-grid>
      <van-grid-item icon="guide-o" text="设备" />
      <van-grid-item icon="link-o" text="信息" />
      <van-grid-item icon="contact" text="权限" />
      <van-grid-item icon="underway-o" text="历史" />
    </van-grid>
    <template v-if="currentUser?.userRole">
      <van-cell title="用户性别" :value="genderEnum[currentUser.gender]" />
      <!--todo 修改路由-->
      <van-cell title="个人设置" is-link to="/user" />
      <van-cell title="应用设置" is-link to="/user" />
      <van-cell title="其他设置" is-link to="/user" />
      <van-cell title="常见问题" is-link to="/user" />
    </template>
    <van-button v-if="currentUser?.userRole" block type="warning" @click="onLogout">退出当前账号</van-button>
    <van-button v-else block type="primary" @click="onLogin">登录</van-button>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { genderEnum } from '@/constants'
import { useUserStore } from '@/store/userStore'
import { userLogout } from '@/api/user'

const router = useRouter()
const userStore = useUserStore()

const currentUser = computed(() => {
  return userStore.loginUser
})

const onLogout = async () => {
  const res = await userLogout()
  userStore?.userLogout()
  await router.push('/user/login')
}

const onLogin = () => {
  router.push('/user/login')
}

onMounted(() => {})
</script>

<style scoped>
.topRow {
  background-color: #45bcd9;
  display: flex;
  justify-content: space-between;
}

.margin-16 {
  margin-bottom: 16px;
}

.userInfo {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  margin-left: -70px;
}

.userName {
  font-family: 'Microsoft YaHei';
  font-size: 1.5rem;
  font-weight: 500;
  margin-right: 10px;
}
</style>
